<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>14-三级联动案例</title>
</head>
<body>
    <select name="" id="province"></select>
    <select name="" id="city">
        <option value="">---</option>
    </select>
    <select name="" id="country">
        <option value="">---</option>
    </select>
    <script>
        //1.当页面加载完毕后，动态获取省份信息
        var xhr = createXMLHttpRequest();
        // 获取省份下拉列表框
        var provinceElement = document.getElementById("province")
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 && xhr.status === 200){
                // console.log(xhr.readyState)
                var datas = JSON.parse(xhr.responseText);// 用parse将响应信息转为JSON对象
                // 得到了数组类型对象，进行遍历
                for(var i = 0;i<datas.length;i++){
                    var data = datas[i];
                    var province = data.province
                    // 将数据更新到HTML页面中
                    var opt = document.createElement('option');
                    opt.setAttribute('value',province);
                    opt.textContent = province;
                    provinceElement.appendChild(opt);
                }
                    //为省份下拉列表绑定change事件
                    provinceElement.addEventListener('change',function(){
                        //1.用户选择的省份信息
                        var opts = provinceElement.options;
                        var index = provinceElement.selectedIndex;//被选中的<option>的索引值
                        var opt = opts.item(index)
                        var province = opt.getAttribute('value');
                        // 2.根据省份信息获取城市信息
                        for(var i = 0;i<datas.length;i++){
                            var data = datas[i];
                            var province = data.province
                            
                        }


                    })
                }
            }
        }
        xhr.open('get','./data/server1.json')
        xhr.send()



        function createXMLHttpRequest(){
		var httpRequest;
		if (window.XMLHttpRequest){
			httpRequest = new XMLHttpRequest();
		}else if (window.ActiveXObject){
			try{
				httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
			}catch(e){
				try{
					httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
				}catch(e){}
			}
		}
		return httpRequest;
	}
    </script>
</body>
</html>